<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        body{
            padding-bottom: 800px;
        }
        code{
            background-color: rgb(49, 48, 48);
            color: white;
            padding: 4px 8px;
            font-size: 12px;
            font-weight: bold;
            box-shadow: 0 0 4px #999;
            border-radius: 6px;
        }
        [v-cloak],[v-text]{
            display: none;
        }
        .loading{
            display: none;
        }
        [v-cloak]+.loading{
            display: block;
        }

        .p-box{
            display: flex;
        }
    </style>
</head>
<body>

    <!-- <p class="p-box" id="pDom">元素显示隐藏</p> -->

    <div v-cloak id="app">
        <h4>boolean类型指令【定义表示启用功能，不定义表示不启用功能】</h4>
        <h5>v-pre</h5>
        <ul>
            <li>取值：不需要表达式，该指令为boolean类型属性</li>
            <li>功能：跳过这个元素和它的子元素的编译过程(vue模板语法的解析过程)。</li>
        </ul>
        <p v-pre>
            在vue中通过模板语法
            <code>{{ 变量 }}</code> 
            可以直接访问vue数据仓库的响应式变量
        </p>
        <h5>v-once</h5>
        <ul>
            <li>取值：不需要表达式，该指令为boolean类型属性</li>
            <li>功能：对当前元素和内部元素vue功能执行一次，程序执行过程不再对该元素范围内的vue功能进行重新执行</li>
        </ul>
        <!-- v-once是在vue页面语法第一加载时完成一次调用，后续更新不会再调用 -->
        <div v-once>
            <p>info的默认值:{{ info }}</p>
            <p v-text=" 'info的默认值:'+info "></p>
        </div>
        <p>info当前值:{{ info }}</p>
        <p v-text=" 'info当前值:'+info "></p>
        <input type="button" value="change info" v-on:click="changeInfo()">

        <h5>v-cloak 【无副作用】</h5>
        <ul>
            <li>取值：不需要表达式，该指令为boolean类型属性</li>
            <li>实现在vue功能构建完成前，隐藏浏览上vue语法表达式，该指令本身不具有特殊功能，需配合css样式实现效果</li>
        </ul>
        <p v-cloak>info：{{ info }}</p>
    </div>
    <p class="loading">页面加载中……</p>

    <script src="../assets/mock/mock-min.js"></script>
    <script type="module"> 
        import { createApp } from "../assets/vue3/vue.esm-browser.js";
        // 模拟网络叫差的情况
        setTimeout(function(){
            createApp({
                data(){
                    return {
                        info:"仓库数据变量info"
                    }
                },
                methods:{
                    changeInfo(){
                        this.info = Mock.mock("@cname")
                    }
                }
            }).mount("#app")
        },5000)
    </script>
</body>
</html>